import Vue from 'vue';
import Vuex from 'vuex';
import { getWidgetTemplateByName } from '@/widgets/config'

Vue.use(Vuex);

const getInitialState = () => {
  return {
    canvas: {
      scale: 1.0,             // 缩放大小
      offsetX: 0,             // 位移X坐标
      offsetY: 0,             // 位移Y坐标
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      showGrid: true,         // 网格
      state: '',              // selection|movement
    },
    widgets: {
      byId: {
        1: {
          id: 1,
          type: "CircleWidget",
          props: {
            radius: 10,
            offsetX: 150,
            offsetY: 262
          }
        },
        2: {
          id: 2,
          type: "PolygonWidget",
          props: {
            offsetX: 100,
            offsetY: 100,
            width: 200,
            height: 200,
            pointIds: [
              1, 2, 3, 4,
            ]
          }
        }
      },
      allIds: [
        1, 2
      ]
    },
    points: {
      byId: {
        1: {
          id: 1,
          widgetId: 2,
          dx: 93,
          dy: 10
        },
        2: {
          id: 2,
          widgetId: 2,
          dx: 93,
          dy: 79
        },
        3: {
          id: 3,
          widgetId: 2,
          dx: 10,
          dy: 79
        },
        4: {
          id: 4,
          widgetId: 2,
          dx: 10,
          dy: 10
        }
      },
      allIds: [
        1, 2, 3, 4
      ]
    },
    tools: {
      byId: {
        1: {
          id: 1,
          type: "CircleWidget",
          icon: 'CircleWidget',
          text: 'circle'
        },
        2: {
          id: 2,
          type: "PolygonWidget",
          icon: 'PolygonWidget',
          text: 'polygon'
        }
      },
      allIds: [
        1, 2
      ]
    }
  }
}

export default new Vuex.Store({
  state: getInitialState(),
  mutations: {
    moveCanvas(state, {
      movementX,
      movementY,
    }) {
      state.canvas.offsetX += movementX / state.canvas.scale;
      state.canvas.offsetY += movementY / state.canvas.scale;
    },
    moveWidget(state, {
      id,
      movementX,
      movementY
    }) {
      const {
        [id]: {
          props,
        },
      } = state.widgets.byId;

      props.offsetX += movementX;
      props.offsetY += movementY;
    },
    // 移动多边形的点
    movePoint(state, {
      pointId,
      // widgetId,
      movementX,
      movementY
    }) {
      const { [pointId]: pointInfo } = state.points.byId;
      // const { [widgetId]: widgetInfo } = state.widgets.byId;
      pointInfo.dx += movementX;
      pointInfo.dy += movementY;
    },
    // 添加多边形的点
    addNewPoint(state, {
      offsetX,
      offsetY,
      pointId
    }) {
      const newId = Math.max.apply(null, state.points.allIds) + 1;

      const { [pointId]: { widgetId } } = state.points.byId;
      const newPointSpec = { id: newId, widgetId: widgetId, dx: offsetX, dy: offsetY }
      const { [widgetId]: { props: { pointIds } } } = state.widgets.byId;

      const newIndex = pointIds.indexOf(pointId) + 1;
      pointIds.splice(newIndex, 0, newId);

      Vue.set(state.points.byId, newId, newPointSpec);
      Vue.set(state.points.allIds, state.points.allIds.length, newId);
    },
    // 添加组件
    createWidgetByToolId(state, {
      id,
      offsetX,
      offsetY
    }) {
      const toolInfo = state.tools.byId[id];
      const config = getWidgetTemplateByName(toolInfo.type);
      const newWidgetId = Math.max.apply(null, state.widgets.allIds) + 1;
      window.console.log(offsetX, offsetY);
      const widgetSpec = {
        id: newWidgetId,
        type: toolInfo.type,
        props: {
          ...config.props,
          offsetX: offsetX - (config.props.width || config.props.radius * 2),
          offsetY: offsetY - (config.props.height || config.props.radius * 2),
        }
      };
      window.console.log(widgetSpec);
      if (config.dx) {
        widgetSpec.props.offsetX += config.dx;
      }
      if (config.y) {
        widgetSpec.props.offsetY += config.gy;
      }

      if (config.points) {
        config.points.forEach((pointInfo) => {
          const newPointId = Math.max.apply(null, state.points.allIds) + 1;
          widgetSpec.props.pointIds.push(newPointId);

          Vue.set(state.points.allIds, state.points.allIds.length, newPointId);

          Vue.set(state.points.byId, newPointId, {
            id: newPointId,
            widgetId: newWidgetId,
            dx: pointInfo.dx,
            dy: pointInfo.dy,
          });
        });
      }
      Vue.set(state.widgets.byId, newWidgetId, widgetSpec);
      Vue.set(state.widgets.allIds, state.widgets.allIds.length, newWidgetId);
    }
  }
})